<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="stylesheet" type="text/css" href="images/css/datepicker.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-form</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>Form 表单</h2>
				<p>由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>典型表单</h3>
					<p>包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。</p>
				</div>
				<div class="content form">
					<qx-form label-width="100px">
						<qx-form-item label="输入框">
							<qx-input required name="text"></qx-input>
						</qx-form-item>
						<qx-form-item label="密码框">
							<qx-input type="password" required name="password" show-pass></qx-input>
						</qx-form-item>
						<qx-form-item label="文本域">
							<qx-input
								type="textarea"
								required
								show-word
								maxlength="50"
								name="textarea"
							></qx-input>
						</qx-form-item>
						<qx-form-item label="活动时间">
							<span class="date">
								<qx-date name="date"></qx-date>
							</span>
							<span class="time">
								<qx-time name="time"></qx-time>
							</span>
						</qx-form-item>
						<qx-form-item label="下拉框">
							<qx-select placeholder="请选择" name="select">
								<qx-option label="黄金糕" value="0"></qx-option>
								<qx-option label="双皮奶" checked value="1"></qx-option>
								<qx-option label="蚵仔煎" value="2"></qx-option>
								<qx-option label="龙须面" value="3"></qx-option>
								<qx-option label="北京烤鸭" value="4"></qx-option>
							</qx-select>
						</qx-form-item>
						<qx-form-item label="图标选择器">
							<qx-select placeholder="请选择图标" name="icon" icon="spinner" icon-group></qx-select>
						</qx-form-item>
						<qx-form-item label="书籍">
							<div class="cascader">
								<qx-cascader name="cascader" placeholder="请选择书籍"></qx-cascader>
							</div>
						</qx-form-item>
						<qx-form-item label="复选框">
							<qx-checkbox-group>
								<qx-checkbox value="xiezuo" checked name="checkbox">写作</qx-checkbox>
								<qx-checkbox value="yuedu" name="checkbox">阅读</qx-checkbox>
								<qx-checkbox value="fadai" name="checkbox">发呆</qx-checkbox>
							</qx-checkbox-group>
						</qx-form-item>
						<qx-form-item label="单选框">
							<qx-radio value="nan" checked name="radio">男</qx-radio>
							<qx-radio value="nv" name="radio">女</qx-radio>
						</qx-form-item>
						<qx-form-item label="状态">
							<qx-radio value="1" checked name="status">成功</qx-radio>
							<qx-radio value="0" name="status">失败</qx-radio>
						</qx-form-item>
						<qx-form-item label="开关">
							<qx-switch name="switch" checked></qx-switch>
						</qx-form-item>
						<qx-form-item>
							<qx-button native="submit">提交</qx-button>
							<qx-button native="reset">重置</qx-button>
						</qx-form-item>
					</qx-form>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>表单验证</h3>
					<p>
						在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误，返回数据key默认取name值，name值必传
					</p>
				</div>
				<div class="content checkForm">
					<qx-form label-width="100px">
						<qx-form-item label="输入框" prop="input">
							<qx-input name="username"></qx-input>
						</qx-form-item>
						<qx-form-item label="密码框" prop="password">
							<qx-input type="password" name="password" show-pass></qx-input>
						</qx-form-item>
						<qx-form-item label="文本域" prop="textarea">
							<qx-input type="textarea" name="textarea"></qx-input>
						</qx-form-item>
						<qx-form-item label="活动时间" prop="datetime">
							<span class="date2">
								<qx-date name="date"></qx-date>
							</span>
						</qx-form-item>
						<qx-form-item label="集合时间" prop="datetime2">
							<span class="time2">
								<qx-time name="time"></qx-time>
							</span>
						</qx-form-item>
						<qx-form-item label="下拉框" prop="select">
							<qx-select placeholder="请选择" name="select">
								<qx-option label="黄金糕" value="0"></qx-option>
								<qx-option label="双皮奶" checked value="1"></qx-option>
								<qx-option label="蚵仔煎" value="2"></qx-option>
								<qx-option label="龙须面" value="3"></qx-option>
								<qx-option label="北京烤鸭" value="4"></qx-option>
							</qx-select>
						</qx-form-item>
						<qx-form-item label="图标选择器" prop="icon">
							<qx-select placeholder="请选择图标" name="icon" icon-group></qx-select>
						</qx-form-item>
						<qx-form-item label="书籍" prop="cascader">
							<div class="cascader">
								<qx-cascader name="cascader" placeholder="请选择书籍"></qx-cascader>
							</div>
						</qx-form-item>
						<qx-form-item label="复选框" prop="checkbox">
							<qx-checkbox-group>
								<qx-checkbox value="xiezuo" checked name="checkbox">写作</qx-checkbox>
								<qx-checkbox value="yuedu" name="checkbox">阅读</qx-checkbox>
								<qx-checkbox value="fadai" name="checkbox">发呆</qx-checkbox>
								<qx-checkbox value="kanshu" name="checkbox">看书</qx-checkbox>
							</qx-checkbox-group>
						</qx-form-item>
						<qx-form-item label="单选框" prop="radio">
							<qx-radio value="nan" checked name="radio">男</qx-radio>
							<qx-radio value="nv" name="radio">女</qx-radio>
						</qx-form-item>
						<qx-form-item label="开关">
							<qx-switch name="switch"></qx-switch>
						</qx-form-item>
						<qx-form-item>
							<span class="submit">
								<qx-button type="primary">提交</qx-button>
							</span>
							<span class="reset">
								<qx-button native="reset">重置</qx-button>
							</span>
						</qx-form-item>
					</qx-form>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Form Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>label-width</td>
						<td>表单域标签的的宽度，例如 '50px'。支持 auto。</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>method</td>
						<td>规定用于发送表单数据的 HTTP 方法。</td>
						<td>string</td>
						<td>get / post</td>
						<td>get</td>
					</tr>
					<tr>
						<td>action</td>
						<td>规定当提交表单时向何处发送表单数据。</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>accept-charset</td>
						<td>规定服务器可处理的表单数据字符集。</td>
						<td>string</td>
						<td>character_set</td>
						<td>—</td>
					</tr>
					<tr>
						<td>enctype</td>
						<td>规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）</td>
						<td>string</td>
						<td>application/x-www-form-urlencoded / multipart/form-data / text/plain</td>
						<td>application/x-www-form-urlencoded</td>
					</tr>
					<tr>
						<td>target</td>
						<td>规定在何处打开 action URL。</td>
						<td>string</td>
						<td>_blank / _self / _parent / _top</td>
						<td>_self</td>
					</tr>
				</tbody>
			</table>
			<h2>Form-Item Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>label</td>
						<td>标签文本</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
			<h2>Form Event</h2>
			<table>
				<thead>
					<tr>
						<td>事件名称</td>
						<td>说明</td>
						<td>回调参数</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>checkForm</td>
						<td>
							任一表单项被校验后触发，参数：1、rule 检验规则，2、type 类型（submit / reset），valid
							回调函数
						</td>
						<td>被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）</td>
					</tr>
					<tr>
						<td>getForm</td>
						<td>获取父级下所有表单数据</td>
						<td>data</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/datepicker.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script type="text/javascript">
			$('.time').DatePicker({
				format: 'HH:mm:ss',
				min: '06:00:00',
				max: '20:00:00'
			})
			$('.date').DatePicker({
				format: 'YYYY-MM-DD'
			})

			$('.time2').DatePicker({
				format: 'HH:mm:ss',
				min: '06:00:00',
				max: '20:00:00'
			})
			$('.date2').DatePicker({
				format: 'YYYY-MM-DD'
			})

			// 获取表单数据
			$('.form button')
				.eq(0)
				.click(function () {
					$('.form').getForm({
						success: function (e) {
							console.log(e)
						}
					})
				})

			// data
			var options = [
				{
					label: '指南',
					children: [
						{
							label: '设计原则',
							children: [
								{
									label: '一致'
								},
								{
									label: '反馈'
								},
								{
									label: '效率'
								},
								{
									label: '可控'
								}
							]
						},
						{
							label: '导航',
							children: [
								{
									label: '侧向导航'
								},
								{
									label: '顶部导航'
								}
							]
						}
					]
				},
				{
					label: '组件',
					children: [
						{
							label: 'Basic',
							children: [
								{
									label: 'Layout 布局'
								},
								{
									label: 'Color 色彩'
								},
								{
									label: 'Typography 字体'
								},
								{
									label: 'Icon 图标'
								},
								{
									label: 'Button 按钮'
								}
							]
						},
						{
							label: 'Form',
							children: [
								{
									label: 'Radio 单选框'
								},
								{
									label: 'Checkbox 多选框'
								},
								{
									label: 'Input 输入框'
								},
								{
									label: 'InputNumber 计数器'
								},
								{
									label: 'Select 选择器'
								},
								{
									label: 'Cascader 级联选择器'
								},
								{
									label: 'Switch 开关'
								},
								{
									label: 'Slider 滑块'
								},
								{
									label: 'TimePicker 时间选择器'
								},
								{
									label: 'DatePicker 日期选择器'
								},
								{
									label: 'DateTimePicker 日期时间选择器'
								},
								{
									label: 'Upload 上传'
								},
								{
									label: 'Rate 评分'
								},
								{
									label: 'Form 表单'
								}
							]
						},
						{
							label: 'Data',
							children: [
								{
									label: 'Table 表格'
								},
								{
									label: 'Tag 标签'
								},
								{
									label: 'Progress 进度条'
								},
								{
									label: 'Tree 树形控件'
								},
								{
									label: 'Pagination 分页'
								},
								{
									label: 'Badge 标记'
								}
							]
						},
						{
							label: 'Notice',
							children: [
								{
									label: 'Alert 警告'
								},
								{
									label: 'Loading 加载'
								},
								{
									label: 'Message 消息提示'
								},
								{
									label: 'MessageBox 弹框'
								},
								{
									label: 'Notification 通知'
								}
							]
						},
						{
							label: 'Navigation',
							children: [
								{
									label: 'NavMenu 导航菜单'
								},
								{
									label: 'Tabs 标签页'
								},
								{
									label: 'Breadcrumb 面包屑'
								},
								{
									label: 'Dropdown 下拉菜单'
								},
								{
									label: 'Steps 步骤条'
								}
							]
						},
						{
							label: 'Others',
							children: [
								{
									label: 'Dialog 对话框'
								},
								{
									label: 'Tooltip 文字提示'
								},
								{
									label: 'Popover 弹出框'
								},
								{
									label: 'Card 卡片'
								},
								{
									label: 'Carousel 走马灯'
								},
								{
									label: 'Collapse 折叠面板'
								}
							]
						}
					]
				},
				{
					label: '资源',
					children: [
						{
							label: 'Axure Components'
						},
						{
							label: 'Sketch Templates'
						},
						{
							label: '组件交互文档'
						}
					]
				}
			]

			$('.cascader').each(function () {
				$(this).cascader({
					options: options,
					change: function (res) {
						console.log(res)
					}
				})
			})

			// 常用匹配正则
			// /^1\d{10}$/                                                                              // 验证手机号码
			// /^0\d{2,3}-?\d{7,8}$/                                                                    // 验证电话号码
			// /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/                        // 验证电子邮箱
			// /^[\u4E00-\u9FA5]{2,4}$/                                                                 // 验证姓名
			// /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/                                               // 验证身份证号
			// /^[0-9]*$/                                                                               // 验证纯数字
			// ^\d{n}$                                                                                  // n位的数字
			// ^\d{n,}$                                                                                 // 至少n位的数字

			// 检测表单返回数据 key 取name值，因此name值必传
			const rule = {
				input: {
					min: 5, // 最小值
					max: 10, // 最大值
					required: true, // 必填值
					pattern: /^[0-9]*$/, // 正则匹配
					message: 'input必填，并且长度在5 到 10个数字' // 提示语
				},
				password: {
					min: 8,
					max: 18,
					required: true,
					message: 'password必填，并且长度在8 到 18个字符'
				},
				datetime: {
					required: true,
					message: '时间日期必填'
				},
				datetime2: {
					required: true,
					message: '时间日期必填2'
				},
				textarea: {
					required: true,
					message: 'textarea是必填项'
				},
				select: {
					required: true,
					message: 'select是必填项'
				},
				icon: {
					required: true,
					message: 'icon是必填项'
				},
				cascader: {
					required: true,
					message: 'cascader是必填项'
				},
				checkbox: {
					min: 2,
					max: 3,
					required: true,
					message: 'checkbox 至少选择二项，最多三项'
				},
				radio: {
					required: true,
					message: 'radio 至少选择一项'
				}
			}

			$('.checkForm').validate(rule)

			// Base 类
			var base = new Base()

			$('.submit button').on('click', function () {
				rule.type = 'submit' // 类型
				rule.valid = function (e) {
					// 回调函数
					console.log(e)
					if (e.valid) {
						base.ajax({
							data: e.data,
							method: 'post',
							successMsg: '提交成功！',
							errorMsg: '提交失败！',
							url: 'upload.php',
							success(res) {
								console.log(res)
							},
							error(res) {
								console.log(res)
							}
						})
					}
				}
				$('.checkForm').validate(rule)
			})

			$('.reset button').on('click', function () {
				rule.type = 'reset'
				$('.checkForm').validate(rule)
			})
		</script>
	</body>
</html>
